
import { connect } from 'dva';
import { ModelState } from './model';
import { Button, Image, Popconfirm, Space, Switch, Table, notification, message } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import { Dispatch, history } from 'umi';
import { IData, Video } from './data';
import { FC, useEffect } from 'react';
import styles from './index.less';
import { ColumnsType } from 'antd/es/table/interface';
import { deleteVideo, getVideoDetail, getVideoList } from './service';
import React from 'react';

export interface VideoListProps {
    list: Video[];
    dispatch: Dispatch;
}

const openNotification = (record: Video) => {
    notification.success({
        message: '编辑成功',
        description: (
            <div>
                {record.title}修改为
                {record.playStatus === 1 ? (
                    <span style={{ color: 'green' }}>上映</span>
                ) : (
                        <span style={{ color: 'red' }}>下架</span>
                    )}
            状态
            </div>
        ),
    });
};



export const VideoList: FC<VideoListProps> = ({ list, dispatch }) => {


    useEffect(() => {

        getVideoList<IData>().then(res => {
            console.log('object', res.code);
        })

        dispatch({
            type: 'video/fetchList',
        });
    }, []);

    const columns: ColumnsType<Video> = [
        {
            title: '序列',
            align: 'center',
            key: 'id',
            render: (text, record, index) => {
                //生成序号
                return <span>{index + 1}</span>;
            },
        },
        {
            title: '视频名称',
            dataIndex: 'title',
            key: 'title',
        },
        {
            title: '视频封面',
            key: 'poster',
            render: (text, record) => {
                return <Image width={60} src={record.poster} height={60}></Image>;
            },
        },
        {
            title: '作者',
            dataIndex: 'author',
            key: 'author',
        },
        {
            title: '介绍',
            dataIndex: 'intro',
            key: 'intro',
        },
        {
            title: '总集数',
            dataIndex: 'totals',
            key: 'totals',
            align: 'center',
        },
        {
            title: '已更新至',
            dataIndex: 'current',
            key: 'current',
            align: 'center',
        },
        {
            title: '更新周期',
            dataIndex: 'updatePeriod',
            key: 'updatePeriod',
            align: 'center',
        },
        {
            title: '状态',
            dataIndex: 'playStatus',
            key: 'playStatus',
            align: 'center',
            render: (text) => {
                return <span>{text == 1 ? '上映' : '下架'}</span>;
            },
        },
        {
            title: '操作',
            dataIndex: 'siteStatus',
            key: 'siteStatus',
            render: (text, record) => {
                return (
                    <div className={styles.action}>
                        <div>
                            <Switch
                                checked={record.playStatus == 1}
                                checkedChildren={<CheckOutlined />}
                                unCheckedChildren={<CloseOutlined />}
                                onChange={switchEvent(record)}
                            ></Switch>
                        </div>
                        <Space>
                            <span className={styles.edit} onClick={() => handleEdit(record)}>
                                编辑
                  </span>
                            <span className={styles.del}>
                                <Popconfirm
                                    title="您确定要删除此条记录吗"
                                    onConfirm={() => delTheRecord(record.id)}
                                    okText="是"
                                    cancelText="否"
                                >
                                    删除
                    </Popconfirm>
                            </span>
                        </Space>
                    </div>
                );
            },
        },
    ];

    const handleAddVideo = () => {
        history.push('/video/videoList/edit', { isAdd: true });
    }

    const handleEdit = async (record: Video) => {
        const res = await getVideoDetail({ id: record.id });
        dispatch({
            type: 'video/setItem',
            payload: res.data,
        });
        history.push('/video/videoList/edit');
    }

    const delTheRecord = async (id: string) => {
        const res = await deleteVideo({ id });
        if (res.code === 200) {
            message.success({ content: '删除成功！' })
            dispatch({
                type: 'video/fetchList',
            })
        }
    }

    const switchEvent = (record: Video) => {
        return async (flag: boolean) => {
            console.log(flag);

            const res = await dispatch({
                type: 'video/updateOne',
                payload: {
                    id: record.id,
                    playStatus: Number(flag),
                },
            });
            if (res.code === 200) {
                openNotification({ ...record, playStatus: Number(flag) });
                dispatch({
                    type: 'video/fetchList',
                });
            }
            console.log(res);
        };
    };

    return (
        <PageContainer
            content={
                <Button type="primary" onClick={handleAddVideo}>
                    新增视频
                </Button>
            }
        >
            <Table dataSource={list} columns={columns} rowKey="id"></Table>
        </PageContainer>
    );
}

const mapStateToProps = ({ video }: { video: ModelState; }) => ({
    list: video.list
})


export default connect(mapStateToProps)(VideoList)

type GetTypeSimple<T> = T extends infer R ? R : never;

